<template>
  <a-card class="body-container">
    <s-list-form :enable-more="false" @change="
      $nextTick(() => {
        $calcTableHeight()
      })
      ">
      <template #less>
        <s-form-item label="任务名称" size="list-middle" name="taskName" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入任务名称" v-model="query.taskName" />
        </s-form-item>
        <s-form-item label="任务类型" size="list-middle" name="taskType" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请输入任务类型" code="TASK_TYPE" v-model="query.taskType" />
        </s-form-item>
        <s-form-item label="任务状态" size="list-middle" name="taskStatus" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请输入任务状态" code="TASK_STATUS" v-model="query.taskStatus" />
        </s-form-item>
        <s-form-item label="发起时间" size="list-middle" name="initiateTime" :colon="true" :display-title="true">
          <s-date-picker :allow-clear="true" type="range" value-format="YYYY-MM-DD hh:mm:ss" :show-time="true"
            v-model="query.initiateTime" />
        </s-form-item>
        <!-- <s-form-item label="紧急程度" size="list-middle" name="taskStatus" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请选择紧急程度" code="TASK_STATUS" v-model="query.taskStatus" />
        </s-form-item> -->
        <s-form-item label="是否关注" size="list-middle" name="taskStatus" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请选择是否关注" v-model="query.isLike" />
        </s-form-item>
        <s-button type="primary" icon="search-outlined" @click="search">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query = {}">重置</s-button>
      </template>
      <template #more>
        <s-form-item label="任务类型" size="list-middle" name="taskType" :colon="true" :display-title="true"
          :rules="[{ 'max': 4, 'message': '最长为4位' }]">
          <s-input :allow-clear="true" placeholder="请输入任务类型" v-model="query.taskType" />
        </s-form-item>
        <s-form-item label="任务状态" size="list-middle" name="taskStatus" :colon="true" :display-title="true"
          :rules="[{ 'max': 4, 'message': '最长为4位' }]">
          <s-input :allow-clear="true" placeholder="请输入任务状态" v-model="query.taskStatus" />
        </s-form-item>
        <s-form-item label="接收单位" size="list-middle" name="receivingUnit" :colon="true" :display-title="true"
          :rules="[{ 'max': 255, 'message': '最长为255位' }]">
          <s-input :allow-clear="true" placeholder="请输入接收单位" v-model="query.receivingUnit" />
        </s-form-item>
        <s-form-item label="超期时间" size="list-middle" name="expirationTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入超期时间" v-model="query.expirationTime" />
        </s-form-item>
        <s-form-item label="备注" size="list-middle" name="remark" :colon="true" :display-title="true"
          :rules="[{ 'max': 255, 'message': '最长为255位' }]">
          <s-input :allow-clear="true" placeholder="请输入备注" v-model="query.remark" />
        </s-form-item>
        <s-form-item label="发起单位" size="list-middle" name="initiator" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入发起单位" v-model="query.initiator" />
        </s-form-item>
        <s-form-item label="发起时间" size="list-middle" name="initiateTime" :colon="true" :display-title="true">
          <s-input :allow-clear="true" placeholder="请输入发起时间" v-model="query.initiateTime" />
        </s-form-item>
        <s-form-item label="发起人" size="list-middle" name="contactPerson" :colon="true" :display-title="true"
          :rules="[{ 'max': 50, 'message': '最长为50位' }]">
          <s-input :allow-clear="true" placeholder="请输入发起人" v-model="query.contactPerson" />
        </s-form-item>
        <s-form-item label="联系电话" size="list-middle" name="contactPhone" :colon="true" :display-title="true"
          :rules="[{ 'max': 14, 'message': '最长为14位' }]">
          <s-input :allow-clear="true" placeholder="请输入联系电话" v-model="query.contactPhone" />
        </s-form-item>
      </template>
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <!-- <s-button type="primary" icon="plus-outlined" @click="$refs.add.open()">批量签收</s-button> -->
      </template>
      <template #right>
        <s-button type="primary" icon="plus-outlined" @click="addOpen">新建任务</s-button>
        <s-button type="primary" icon="plus-outlined" @click="infoOpen">详情</s-button>
        <!-- <a-popconfirm title="确认删除所选数据？" ok-text="是" cancel-text="否" @confirm="deleteMulti">
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm> -->
      </template>
    </s-tool-bar>
    <div class="tab">
      <div class="btn" :class="{ active: itemIndex == 1 }" @click="btnClick(1)">待办(12)</div>
      <div class="btn" :class="{ active: itemIndex == 2 }" @click="btnClick(2)">已办(6)</div>
      <div class="btn" :class="{ active: itemIndex == 3 }" @click="btnClick(3)">重点关注</div>
      <div class="btn" :class="{ active: itemIndex == 4 }" @click="btnClick(4)">全部</div>
      <div class="btn" :class="{ active: itemIndex == 5 }" @click="btnClick(5)">草稿箱</div>
    </div>
    <s-table ref="table" bordered :echos="[
      {
        type: 'TASK_TYPE',
        name: 'taskType',
        label: 'text',
        value: 'value',
        url: '/data/dict/item/selectListByGroupId?groupIds=TASK_TYPE'
      }
    ]" :scroll="{ y: tableHeight }" :columns="columns" url="/modules/doorTask/pageList">
      <!-- <template #name="{ text }">
        <a>{{ text }}</a>
      </template> -->
      <!-- <template v-if="column.dataIndex === 'taskCode'">
        <a>{{ text }}</a>
      </template> -->
      <template #bodyCell="{ column, record, index }">
        <!-- <template v-if="column.key === 'bianhao'">
          <a href="javascript:;">{{ text }}</a>
        </template> -->
        <template v-if="column.key === 'action'">
          <!-- <a style="margin-right: 8px" @click="$refs.detail.open(record.id)">
            <s-icon type="eye-outlined" />查看
          </a> -->
          <a style="margin-right: 8px;color:red" @click="showModal">
            <s-icon type="edit-outlined" />待签收
          </a>
          <a style="margin-right: 8px;" @click="$refs.update.open(record.id)">
            <s-icon type="edit-outlined" />待反馈
          </a>
          <a style="margin-right: 8px;color:#2c2b2b" @click="$refs.update.open(record.id)">
            已完结
          </a>
          <!-- <a-popconfirm title="确认删除此条数据？" ok-text="是" cancel-text="否" @confirm="deleteById(record.id)">
            <a style="margin-right: 8px">
              <s-icon type="delete-outlined" />删除
            </a>
          </a-popconfirm> -->
          <span @click="toggleFavorite(record)" :type="record.isLike ? '01' : '02'" class="shouC">
            <span class="icon-xingxing" v-if="record.isLike == '01'"></span>
            <span class="icon-ditu-xing" v-else></span>
          </span>
        </template>
        <template v-else-if="column.key === 'xuHao'">
          {{ index + 1 }}
        </template>
      </template>
    </s-table>
    <!-- 签收弹窗 -->
    <a-modal v-model:visible="visible" title="签收" @ok="handleOk">
      <p>任务编号: {{ form.taskCode }}</p>
      <p>任务名称: {{ form.taskName }}</p>
      <p>任务类型: {{ form.taskType }}</p>
      <p>发起时间: {{ form.initiateTime }}</p>
      <p style="display: flex;"><span>详情: </span>
        <a-textarea style="width: 400px;" v-model="form.taskContent" />
      </p>
    </a-modal>
    <!-- 新建任务 -->
    <add ref="showModalAdd" />
    <info ref="showModalInfo" />
  </a-card>
</template>

<script>
const columns = [
  {
    'title': '序号',
    'dataIndex': 'serialNumber',
    'width': 80,
    'key': 'xuHao',
    'sorter': false,
    customRender: (text, record, index) => index + 1
  },
  // { 'title': '任务编号', 'fixed': 'right', 'key': 'bianhao', 'width': 300 },
  { 'dataIndex': 'taskCode', 'title': '任务编号', 'width': 150, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'taskName', 'title': '任务名称', 'width': 150, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'taskTypeName', 'title': '任务类型', 'width': 120, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'initiatorName', 'title': '来源部门', 'width': 120, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'initiateTimeReturn', 'title': '发起时间', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'taskContent', 'title': '任务详情', 'width': 160, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'taskContent', 'title': '紧急程度', 'width': 160, 'sorter': true, 'ellipsis': true },
  { 'title': '办理状态 / 操作', 'fixed': 'right', 'key': 'action', 'width': 300 }]
import add from './add.vue'
import info from './info.vue'
export default {
  name: 'QueryList',
  components: { add, info },
  data() {
    return {
      form: {
        isLike: '02'
      },
      query: {},
      columns: columns,
      showFirstIcon: true,// 显示隐藏 收藏按钮
      itemIndex: 1,
      visible: false, // 待签收弹窗
      showAdd: false, // 新建任务
      
    }
  },

  methods: {
  
    // 详情
    infoOpen() {
      this.$refs.showModalInfo.open()
    },
    // 新建任务
    addOpen() {
      // this.showAdd = true;
      this.$refs.showModalAdd.open()
    },
    closeModal() {
      this.showAdd = false;
    },
    // 待签收弹窗
    showModal() {
      this.visible = true
    },
    handleOk() {
      this.visible = false;
    },
    // tab
    btnClick(index) {
      this.itemIndex = index
    },
    // 星星 收藏
    toggleFavorite(record) {
      console.log(record);
      if (record.isLike === '02') {
        record.isLike = '01'
      } else {
        record.isLike = '02'
      }
      const params = {
        id: record.taskId,
        like: record.isLike,
      }
      // console.log(params);
      if (record.isLike == '02') {
        this.$api.POST('/modules/doorTask/update', params).then(res => {
          // record.isLike = '01';
          this.search()
        })
      } else {
        this.$api.POST('/modules/doorTask/update', params).then(res => {
          // record.isLike = '02';
          this.search()
        })
      }
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api.DELETE('/modules/doorTask/deleteMulti', { ids: keys.toString() }).then(() => {
          this.$loading(false)
          this.search()
        }).catch(() => {
          this.$loading(false)
        })
      }
    },
    search() {
      const _this = this
      const query = Object.assign({}, this.query)

      this.$refs.table.search(query)
    },
    deleteById(id) {
      this.$loading(true)
      this.$api.DELETE('/modules/doorTask/delete', { id: id }).then(() => {
        this.$loading(false)
        this.search()
      }).catch(() => {
        this.$loading(false)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tab {
  span {
    padding: 0 20px;
  }

  display: flex;
  margin-right: 10px;
  border-radius: 20px;

  .btn {
    font-size: 16px;
    padding: 0 20px;
    color: #07c6e5;
  }

  .active {
    color: #0079FE;
    text-align: center;
    // background: #0045FF;
    padding-bottom: 10px;
    border-bottom: 1px solid #0079FE;
    // border-radius: 20px;
  }
}

::v-deep(.ant-btn) {
  margin-left: 20px;
}

::v-deep(.ant-table.ant-table-bordered>.ant-table-container) {
  margin-top: 20px;
}
</style>